import type { CSSProperties, SlotsType, VNode } from 'vue'
import type { TableProps } from './props'

type AlignmentType = 'left' | 'center' | 'right'
type FixedType = 'left' | 'right'

interface ColumnType {
  field: string
  title: string
  width?: number
  minWidth?: number
  maxWidth?: number
  align?: 'left' | 'center' | 'right'
  resizable?: boolean
  fixed?: FixedType | false
  type?: 'checkbox' | 'radio'
  cellClassName?: string
  headerCellClassName?: string
  children?: ColumnType[]
  colSpan?: number
  rowSpan?: number
  flat?: string
  flatRender?: boolean
  formatter?: (params: CellEventParams) => string
  customHeaderCell?: (params: Pick<CellEventParams, 'column'>) => Record<string, any>
  customCell?: (params: CellEventParams) => Record<string, any>
  headerCellRender?: (column: ColumnType, columnIndex: number, title: string) => VNode
  cellRender?: (params: CellEventParams) => VNode
}

interface CellEventParams {
  value: string | number | null | undefined
  record: Record<string, any>
  column: ColumnType
  rowIndex: number
  columnIndex: number
}

interface BasicCellProps {
  key: string
  column: ColumnType
  columnIndex: number
  type?: 'checkbox' | 'radio'
  className?: string
  style?: CSSProperties
  fixed?: FixedType
}

interface BodyCellProps extends BasicCellProps {
  record: any
  rowIndex: number
  clickHandler: (params: CellEventParams) => void
  dblclickHandler: (params: CellEventParams) => void
}

interface HeaderCellProps extends BasicCellProps {
  mousedownHandler?: (event: MouseEvent, column: ColumnType) => void
  mousemoveHandler?: (event: MouseEvent, column: ColumnType) => void
  mouseoutHandler?: () => void
}

type TableSlotsType = SlotsType<{
  bodyCell: CellEventParams
  headerCell: Pick<CellEventParams, 'column' | 'columnIndex'> & { title: string }
}>

export type {
  TableProps,
  AlignmentType,
  FixedType,
  ColumnType,
  CellEventParams,
  BodyCellProps,
  HeaderCellProps,
  TableSlotsType
}
